.material-search-container{
  background: #fff;
  &.list-background{
    background: transparent;
  }
  .resource-list{
    height: 400rpx;
    position: relative;
    .resource-item{
      @include flex(column, inline-flex);
      @include center;
      margin-right: 10rpx;
      .videoPos{
        position: relative;
        .videoPlay{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      }
    }
  }
  .search-block{
    @include flex;
    @include a-center;
    padding: 15rpx 32rpx;
    background: #fff;
    // border-bottom: 1px solid #EFEFEF;
    z-index: 9;
    position: relative;

    .search-left{
      @include sub-item;
    }

    .layout-icon{
      width: 40rpx;
      height: 40rpx;
      margin-left: 24rpx;
    }
    .back-btn{
      color: #000;
      font-size: 30rpx;
      margin-left: 10rpx;
      padding-left: 14rpx;
    }
  }

  .keyword-block{
    padding: 40rpx 32rpx 60rpx 32rpx;
    .block-title{
      @include flex;
      @include a-center;
      color: #1C1C1C;
      font-size: 28rpx;
      margin-bottom: 20rpx;
      .sub-item{
        @include sub-item;
        padding-left: 10rpx;
      }

      .icon{
        width: 28rpx;
        height: 28rpx;
      }
    }

    .keyword-item{
      @include text-ellipsis;

      color: #000;
      font-size: 24rpx;
      padding: 0 20rpx;
      text-align: center;
      width: 214rpx;
      line-height: 60rpx;
      background: #F5F5F5;
      display: inline-block;
      margin-right: 20rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
      border-radius: 4rpx;

      &.active{
        color: #E21536;
      }

      &:nth-child(3n){
        margin-right: 0;
      }
      // color: #000;
      // font-size: 24rpx;
      // text-align: center;
      // padding: 0 20rpx;
      // line-height: 54rpx;
      // border: 1px solid #000;
      // border-radius: 28rpx;
      // display: inline-block;
      // margin: 20rpx 25rpx 0 0;
    }

    // &.hot{
    //   .keyword-item{
    //     color: #FF53A9;
    //     border: 1px solid #FF8FB0;
    //     position: relative;

    //     .icon{
    //       width: 56rpx;
    //       height: 56rpx;
    //       top: -6rpx;
    //       left: 0;
    //       position: absolute;
    //       z-index: 1;
    //     }
    //   }
    // }
  }

  .keyword-suggest-list{
    .keyword-item{
      color: #C5C5C5;
      font-size: 28rpx;
      line-height: 86rpx;
      padding: 0 32rpx;
      border-bottom: 1px solid #E8E7EA;

      .fontBold{
        color: #000;
      }
    }
  }
}
